<template>
  <div>
    <div style="margin-top: 15px;">
      <van-row>
        <van-col span="15"></van-col>
        <van-col span="3"><van-icon name="scan" size="25px" color="#17E7B6"/></van-col>
        <van-col span="3"><van-icon name="calendar-o" size="25px" color="#17E7B6" @click="sign_in"/></van-col>
        <van-col span="3"><van-icon name="setting-o" size="25px" color="#17E7B6"/></van-col>
      </van-row>
      <div style="margin-top:30px;">
      </div>
      <van-row >
        <van-col span="6">
          <van-uploader :after-read="afterRead">
            <van-image
                round
                width="4rem"
                height="4rem"
                :src="headurl"
            />
          </van-uploader>
        </van-col>
        <van-col span="14">
			<h1>{{nickname}}</h1>
        </van-col>
        <van-col span="4"><van-icon name="ellipsis" size="30px" color="#2D2F30" @click="myMessage"/></van-col>
      </van-row>
    </div>
    <van-divider style="background-color: fuchsia"/>
    <div style="margin-top: 10px;">
      <van-row>
        <van-col span="12">
          <van-cell-group  inset>
            <van-cell title="积分数" :value="jfs" style="background-color: aqua" @click="jf"/>
          </van-cell-group>
        </van-col>
        <van-col span="12">
          <van-cell-group  inset>
            <van-cell title="运动天数" :value="ydts" style="background-color: aqua" @click="ts"/>
          </van-cell-group>
        </van-col>
      </van-row>
      <van-divider style="background-color: fuchsia"/>
      <van-grid  >
        <van-grid-item  icon="like" text="喜欢" class="bjys01"/>
        <van-grid-item icon="star" text="收藏" class="bjys02"/>
        <van-grid-item icon="map-marked" text="足迹" class="bjys03"/>
        <van-grid-item icon="gold-coin" text="账户" class="bjys04"/>
      </van-grid>
      <van-divider style="background-color: fuchsia"/>
    </div >
    <van-cell style="background-color: #E9B981" is-link @click="showPopup">我的文章</van-cell>
    <van-cell style="background-color: #F47D01" is-link @click="showPopup">我的订单</van-cell>
    <van-cell style="background-color: #42b983" is-link @click="showPopup">我的优惠</van-cell>
    <van-cell  style="background-color: cadetblue" is-link @click="showPopup">我的计划</van-cell>
	<van-cell  style="background-color: #aa0000" is-link @click="logout">注销登录</van-cell>
  </div>

</template>

<script>
export default {
  data(){
    return {
	  nickname: "美国队长",
      age: "22岁",
	  sex:"男性",
      ydts:"66天",
      jfs:"123",
      headurl:"https://img.yzcdn.cn/vant/cat.jpeg"
    }
  },
    methods: {
      tzLogin() {
        this.$router.push("/login");
      },
      myMessage() {
        this.$router.push("/myMessage");
      },
      sign_in() {
        this.$router.push("/sign_in");
      }
      ,
      ry() {
        this.$router.push("/myMessage");
      }
      ,
      ts() {
        this.$router.push("/myMessage");
      },
	  //实现账号的注销
	  logout(){
	  		var that=this;
			// var yyqtoken = this.$store.state.yyqtoken;
	  		this.axios.get("auth/loginout?token="+this.$store.state.yyqtoken).then((res) => {
	  		console.log(res)
			
			
	  		if(res.data.code==200){
	  		 	//吐司，短暂的弹出窗，默认3秒自动消失
	  		 	this.$toast.success('注销成功');
	            //成功-跳转到登录界面
				this.$store.state.yyqtoken=null;
	  		 	this.$router.push("/");
	  		}else{
	  		 	this.$toast({
	  		 		message: "亲，网络异常",
	  		 		icon: 'close'
	  		 	});
	  		}
	  		})
	  }, 
      afterRead(file){
        var that=this;
        console.log(file);
        const forms = new FormData();
        //这里的file表示给后台传的属性名字，这里看接口文档需要传的的属性
        forms.append("file", file.file); // 获取上传图片信息
        this.axios.post("oss/uploadHeadImg",forms,{
          headers: {
            'Content-Type': 'multipart/form-data',
			'cstoken':this.$store.state.token
          },
        }).then((res)=>{
          if(res.data.code==200){
            that.headurl=res.data.data;
          }
        }).catch((e)=>{
        })
		
      }
    }
}
</script>

<style>
.bjys01{
  color: crimson;
}
.bjys02{
  color: yellow;
}
.bjys03{
  color: orangered;
}
.bjys04 {
  color: darkmagenta;
}

</style>


